import React ,{ Component } from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { actionCreators }  from './store';
import {
   LoginWarpper,
   LoginBox,
   Input,
   Button,

 } from './style';

class Login extends Component {

  render() {
    const { login ,doLogin } = this.props;
    if (!login){
      return (
        <LoginWarpper>
          <LoginBox>
            <Input  placeholder = '账号' ref = {(input ) => {this.account = input}} />
            <Input  placeholder = '密码' type = 'password'  ref = {(input ) => {this.password = input}} />
            <Button onClick ={ () => doLogin(this.account ,this.password) } >登录</Button>
          </LoginBox>
        </LoginWarpper>
      )

    }else{
      return <Redirect to='/'/>
    }


  }

}


const mapState =(state) =>({
    login: state.getIn(["login","login"]),
})

const mapDispatch = ( dispatch ) => ({

  doLogin(accountElem ,passswordElem){
     dispatch(actionCreators.doLogin(accountElem.value,passswordElem.value));
  }

})

export default connect(mapState,mapDispatch)(Login);
